import { EmployeeModel } from '@/pages/person/data';
import { createemployee } from '@/pages/person/service';
import {
  ModalForm,
  ProFormInstance,
  ProFormText,
  ProFormTimePicker,
} from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Button, message } from 'antd';
import React, { useRef, useState } from 'react';

export type EditFormProps = {
  trigger?: JSX.Element;
  onOk?: () => void;
  initialValues?: Partial<EmployeeModel.employeeResponse>;
};

const EditForm: React.FC<EditFormProps> = ({ onOk, trigger, initialValues }) => {
  const [messageApi, contextHolder] = message.useMessage();
  const [modalVisit, setModalVisit] = useState(false);
  const editFormRef = useRef<ProFormInstance>();
  /* const intl = useIntl(); */
  const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  const periods = [1, 2, 3];

  const { run, loading } = useRequest(createemployee, {
    manual: true,
    onSuccess: () => {
      messageApi.success('Added successfully');
      onOk?.();
      setModalVisit(true);
      editFormRef.current?.resetFields();
    },
    onError: () => {
      messageApi.error('Adding failed, please try again!');
    },
  });
  const openChange = (value: boolean) => {
    setModalVisit(value);
    editFormRef.current?.resetFields();
  };

  return (
    <>
      {contextHolder}
      <ModalForm
        initialValues={initialValues}
        width="1000px"
        formRef={editFormRef}
        title={initialValues ? '修改' : '新增'}
        open={modalVisit}
        onOpenChange={openChange}
        trigger={trigger}
        modalProps={{
          onCancel: () => {},
          okText: '保存',
          okButtonProps: { loading },
          centered: true,
        }}
        onFinish={async (value: EmployeeModel.employeeResponse) => {
          await run(value);
          return true;
        }}
        submitter={{
          render: (props, defaultDoms) => {
            return [
              ...defaultDoms,
              <Button
                key="saveAndContinue"
                type="primary"
                onClick={() => run(editFormRef.current?.validateFieldsReturnFormatValue?.())}
              >
                保存并继续
              </Button>,
            ];
          },
        }}
      >
        <ProFormText
          name="scheduleName"
          label="时段名称"
          rules={[{ required: true, message: '请输入时段名称' }]}
          placeholder="请输入时段名称"
          width="md"
        />
        <table
          style={{
            width: '100%',
            textAlign: 'center',
            borderCollapse: 'collapse',
            border: '1px solid #d9d9d9',
            marginTop:'20px'
          }}
        >
          <thead>
            <tr style={{ height: '40px' }}>
              <th style={{ border: '1px solid #d9d9d9', width: '50px' }}>星期</th>
              {periods.map((period) => (
                <th
                  key={period}
                  colSpan={2}
                  style={{ border: '1px solid #d9d9d9' }}
                >{`时间段${period}`}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {daysOfWeek.map((day) => (
              <tr key={day} style={{ height: '50px' }}>
                <td style={{ border: '1px solid #d9d9d9' }}>{day}</td>
                {periods.map((period) => (
                  <React.Fragment key={`${day}-${period}`}>
                    <td
                      style={{
                        border: '1px solid #d9d9d9',
                        verticalAlign: 'middle',
                      }}
                    >
                      <ProFormTimePicker
                        name={`start-${day}-${period}`}
                        label={null}
                        rules={[{ required: true, message: '请选择开始时间' }]}
                        placeholder="开始时间"
                        format="HH:mm"
                      />
                    </td>
                    <td
                      style={{
                        border: '1px solid #d9d9d9',
                        verticalAlign: 'middle',
                      }}
                    >
                      <ProFormTimePicker
                        name={`end-${day}-${period}`}
                        label={null}
                        rules={[{ required: true, message: '请选择结束时间' }]}
                        placeholder="结束时间"
                        format="HH:mm"
                      />
                    </td>
                  </React.Fragment>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </ModalForm>
    </>
  );
};

export default EditForm;
